import React, { Component } from "react";
import ReactDom from "react-dom";
import './index.css';
import img from './img/3.jpg';

function App() {
    return React.createElement(
        "div",
        { className: "box" },
        React.createElement(Com, null),
        React.createElement("img", { src: img, alt: "" }),
        React.createElement(Warp, null)
    );
}

function Com() {
    return React.createElement(
        "div",
        null,
        "\u6211\u662F\u4E00\u4E2A\u7EC4\u4EF6"
    );
}

class Warp extends Component {
    // 定义组件中内部状态
    constructor() {
        super();
        this.state = {
            count: 1000,
            num: 2000,
            classes: "active",
            flag: true,
            obj: {
                name: "张三"
            },
            arr: [1, 2, 3, 4],
            list: [111, 222, 333, [444, 555]],
            list2: [{
                name: "张三"
            }, {
                name: "李斯特"
            }]
        };
    }
    // 渲染视图
    render() {
        // 通过解构赋值拿到数据
        const { count,
            num,
            classes,
            flag,
            obj,
            arr,
            list,
            list2
        } = this.state;

        const span = React.createElement(
            "span",
            null,
            flag ? "未付款11" : "已支付22"
        );
        return React.createElement(
            "div",
            null,
            React.createElement(
                "p",
                null,
                "\u6570\u5B57: ",
                count
            ),
            React.createElement(
                "p",
                null,
                "\u5B57\u7B26\u4E32:  ",
                classes
            ),
            React.createElement(
                "p",
                null,
                "\u5E03\u5C14\u503C: ",
                flag,
                " - ",
                null,
                " - ",
                undefined
            ),
            React.createElement(
                "p",
                null,
                "\u5BF9\u8C61: ",
                obj.name
            ),
            React.createElement(
                "p",
                null,
                "\u6570\u7EC4: ",
                arr
            ),
            React.createElement(
                "p",
                null,
                "\u5217\u8868: ",
                list
            ),
            React.createElement("br", null),
            React.createElement(
                "div",
                null,
                "v-for :",
                [React.createElement(
                    "li",
                    null,
                    "\u5F20\u4E09"
                ), React.createElement(
                    "li",
                    null,
                    "\u674E\u56DB"
                )]
            ),
            React.createElement(
                "p",
                null,
                "v-show : ",
                React.createElement(
                    "span",
                    { className: flag ? "block" : "none" },
                    "show"
                )
            ),
            React.createElement(
                "p",
                null,
                "\u5546\u54C1\u72B6\u6001 :  ",
                span
            ),
            React.createElement(
                "p",
                null,
                "v-bind : ",
                React.createElement(
                    "span",
                    { className: classes },
                    "123"
                )
            ),
            React.createElement(
                "p",
                null,
                "v-model :"
            )
        );
    }
}

ReactDom.render(React.createElement(App, null), document.getElementById('root'), () => {
    console.log("渲染完成");
});
